<template>
  <div class="body">
    <header class="header">
      <div class="title">
        <img src="../../assets/images/01_11.png" alt="" class="img_zuo" @click="back" />
        <div>{{json.name}}巡查路线</div>
      </div>
    </header>
    <div class="main top" id="ditu">

    </div>

  </div>
</template>

<script>
    import qs from 'qs';
  export default {
    name: 'dwxc_1_calendar',
    data() {
      return {
        map: null,
        centralpoint: ["106.57", "29.55"],//中心点
        path: [
        // ["106.57", "29.55"], [106.572122, 29.551176], [106.577271, 29.552501], [106.578258, 29.554600]
        ],
        list:[],
        marker_list: [],
        dataid:null,
        userid:null,
        json:null,
      }
    },
    mounted() {
      var _this = this;

    },

    //进入该页面时，用之前保存的滚动位置赋值
    methods: {
      //  返回
      back() {
        // this.$router.push("/dwxc_2_Pointcreation");
        this.$router.back()
      },
      inof() {
        // 创建地图
        this.map = new AMap.Map('ditu', {
          resizeEnable: true,
          zoomEnable: true, //地图是否可缩放，默认值为true
        });
        // 设置中心点
        this.map.setCenter(this.centralpoint);
        // 设置地图级别 // PC上，参数zoom可设范围：[3,18]；// 移动端：参数zoom可设范围：[3,19]
        this.map.setZoom(14);
        this.mapmarker()
    
      },
      mapmarker() {//创建坐标点
        var _this = this
        var img_url = require('../../assets/images/dwxc/dwpc_19.gif');
        var content = '';

        var marker = null;
        this.list.forEach(item => {
          content = '';
          content += '<div style="text-align:center;margin-top:0.0741rem;margin-left: -0.1111rem;">';
          content += '<img style="width: 0.6019rem;" src="' + img_url + '"/>';
          content += '<div>'+item.address+'</div>'
          content += '</div>';

          marker = new AMap.Marker({ // 创建一个 Marker 实例：
            position: item.jwd.split(","),// 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
            content: content,//图片
          });
          _this.marker_list.push(marker)
          _this.map.add(marker);
          _this.path.push(item.jwd.split(","))

        });
        this.mapline()
        this.map.setCenter(this.path[0]);


        // 设置点标记的动画效果，此处为弹跳效果
        //marker.setAnimation('AMAP_ANIMATION_BOUNCE');
        // 将创建的点标记添加到已有的地图实例：
        //marker.dataObj = obj;


        // marker.dataObj = obj;
        // marker.on('click', function (o) {
        //   console.log(o)
        //   //_this.map.remove(o.target);
        //   _this.look(o.target.dataObj);
        // });
      },
      mapline() {
        // 创建折线实例
        var polyline = new AMap.Polyline({
          path: this.path,
          borderWeight: 1, // 线条宽度，默认为 1
          strokeColor: '#FFB401', // 线条颜色
          lineJoin: 'round' // 折线拐点连接处样式
        });

        // 将折线添加至地图实例
        this.map.add(polyline);
      },
      inof1() {//获取列表
        try {
          plus.nativeUI.showWaiting("正在加载...");
        } catch (e) {
          console.log("plus问题");
        }
        var params={  
          dwId:this.userid,
          dataId:this.dataid
        }
        this.axios
          .post(
            `${this.$global_msg.Url.host}/DotPlacePatrol/getSpotInspectionRecord`,qs.stringify(params)
          )
          .then((res) => {
            try {
              plus.nativeUI.closeWaiting();
            } catch (e) {
              console.log("plus问题");
            }
            console.log(res);
            if (res.data.code == 200) {
              this.list=res.data.rows.list
              this.inof()
            } else {
              this.$toast(res.data.msg);
            }
          }).catch(err=>{
              this.$terminal._error(err)
          })
      },

    },
    created() {
      this.userid=localStorage.getItem("userId")
      this.json=JSON.parse(sessionStorage.getItem("dwxc_3_data"))
      console.log(this.json)
      this.dataid=this.json.dataid
      // console.log(6 % 7)
    },
    mounted() {
	  this.centralpoint = [this.$global_msg.centerJwd.jd,this.$global_msg.centerJwd.wd];
      this.inof1()
    },

  }
</script>

<style scoped>
  /* 头部 */
  .header {
    height: 1.8519rem;
    background: #007aff;
    padding-top: 0.8333rem;
    box-sizing: border-box;
    width: 100%;
    z-index: 20;
    font-size: 0.388888rem;
    position: fixed;
    top: 0;
    left: 0;
  }

  .title {
    padding: 0 0.3704rem;
    display: flex;
    align-items: center;
    color: #fff;
  }

  .title>div {
    width: 100%;
    font-size: 0.4444rem;
    text-align: center;
  }

  .img_zuo {
    width: 0.2593rem;
    height: 0.463rem;
  }

  .img_jia {
    width: 0.4444rem;
    position: absolute;
    right: 0.3704rem;
  }

  /*  */
  .main {
    flex: 1;
    height: 100vh;
  }
</style>